---
title: 피드백
image: /images/user-guide/emails/emails_header.png
---

<Frame>
  <img src="/images/user-guide/emails/emails_header.png" alt="Header" />
</Frame>

진행 또는 카운트다운을 나타내며 오른쪽에서 왼쪽으로 이동합니다.

<Tabs>

<Tab title="Usage">

```jsx
import { ProgressBar } from "twenty-ui/feedback";

export const MyComponent = () => {
  return (
    <ProgressBar
      duration={6000}
      delay={0}
      easing="easeInOut"
      barHeight={10}
      barColor="#4bb543"
      autoStart={true}
    />
  );
};
```

</Tab>

<Tab title="Props">

| 프로퍼티      | 유형  | 설명                                                               | 기본값       |
| --------- | --- | ---------------------------------------------------------------- | --------- |
| 지속 시간     | 숫자  | 진행 표시줄 애니메이션의 전체 지속시간 (밀리초 단위)                | 3         |
| delay     | 숫자  | 진행 표시줄 애니메이션 시작 지연 시간 (밀리초 단위)                | 0         |
| easing    | 문자열 | 진행 표시줄 애니메이션을 위한 이징 함수                                           | easeInOut |
| barHeight | 숫자  | 바의 높이 (픽셀 단위)                                 | 24        |
| barColor  | 문자열 | 바의 색상                                                            | gray80    |
| autoStart | 부울  | `true`이면, 컴포넌트가 마운트될 때 진행 표시줄 애니메이션이 자동으로 시작됩니다. | `참`       |

</Tab>
</Tabs>

## 원형 진행 표시줄

작업의 진행 상황을 나타내며, 로딩 화면이나 진행 중인 프로세스를 사용자에게 전달하고자 할 때 자주 사용됩니다.

<Tabs>

<Tab title="Usage">

```jsx
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";

export const MyComponent = () => {
  return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
};
```

</Tab>

<Tab title="Props">

| 프로퍼티     | 유형  | 설명            | 기본값          |
| -------- | --- | ------------- | ------------ |
| 크기       | 숫자  | 원형 진행 표시줄의 크기 | 50           |
| barWidth | 숫자  | 진행 표시줄 선의 너비  | 5            |
| barColor | 문자열 | 진행 표시줄의 색상    | currentColor |

</Tab>

</Tabs>
